<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
                *{padding: 0;margin: 0;}
        li{
            list-style: none;
        }
        a{
            color: inherit;
            text-decoration: none;
        }
        img{
            vertical-align: top;
        }
        .w{
            width: 1226px;
            margin: 0 auto;
        }
        .cl::after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
        .main{
            margin-top: 50px;
        }
        .main .preview-wrap{
            float: left;
            width: 400px;
            margin-right: 10px;
            min-height: 600px;
            /* background-color: grey; */
            position: relative;
        }
        .main .itemInfo-wrap{
            overflow: hidden;
            min-height: 600px;
            /* background-color: pink; */
        }
        .preview{
            width: 400px;
            height: 400px;
            position: relative;
        }
        .preview .smallImg{
            width: 100%;
            height: 100%;
        }
        .preview .shadow{
            width: 200px;
            height: 200px;
            background-color:rgba(0,0,0,0.4);
            position: absolute;
            left: 0;
            top: 0;
        }
        .preview-scale{
            width: 600px;
            height: 600px;
            /* background-color:rgba(0,0,0,0.5); */
            overflow: hidden;
            position: absolute;
            left: 410px;
            top: 0;
        }
        .preview-scale img{
            width: 1200px;
            height: 1200px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="container main w cl">
        <div class="preview-wrap">
            <div class="preview">
                <img src="girlsmall1.jpg" alt="" class="smallImg">
                <div class="shadow"></div>
            </div>
            <!-- <div class="spec-list"></div> -->
            <div class="preview-scale">
                <img src="girlbig1.jpg" alt="" class="bigImg">
            </div>
        </div>
        <div class="itemInfo-wrap"></div>
    </div>
</body>
<script>
    var shadow = document.getElementsByClassName("shadow")[0];
    var preview = document.querySelector(".preview");
    var previewWrap = document.querySelector(".preview-wrap");
    var smallImg = document.getElementsByClassName("smallImg")[0];
    var bigImg = document.getElementsByClassName("bigImg")[0];

    var maxLeft = preview.clientWidth - shadow.clientWidth;
    var maxTop = preview.clientHeight - shadow.clientHeight;

    var scale = bigImg.clientHeight/smallImg.clientHeight;//计算缩放比例

    preview.onmousemove = function(event){
        var event = event || window.event;
        var x = event.pageX - previewWrap.offsetLeft - shadow.clientWidth/2;
        var y = event.pageY - previewWrap.offsetTop - shadow.clientHeight/2;

        if(x <= 0) x = 0;
        if(x >= maxLeft) x  = maxLeft;
        if(y <= 0) y = 0;
        if(y >= maxTop) y = maxTop; 
        shadow.style.left = x + "px";
        shadow.style.top = y + "px";

        bigImg.style.left = - x * scale + "px";
        bigImg.style.top = - y * scale + "px";
    }
</script>
</html>